<template>
    <div class="back">
        <div class="login">
            <h2>划水出行员工登录</h2>
            <div class="form-item">
                <label for="username">用户名：</label>
                <input type="text" id="username" v-model="username" placeholder="请输入用户名">
            </div>
            <div class="form-item">
                <label for="password">密码：&nbsp;&nbsp;&nbsp; </label>
                <input type="password" id="password" v-model="password" placeholder="请输入密码">
            </div>
            <div class="form-item">
                <button @click="handleLogin">登录</button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            username: "",
            password: "",
        };
    },
    methods: {
        async handleLogin() {
            if (this.username === "" || this.password === "") {
                this.$message.error("账号或密码不能为空！");
                return;
            }
            try {
                const res = await axios({
                    url: "/api/employee/login",
                    method: "post",
                    data: {
                        username: this.username,
                        password: this.password,
                    },
                });

                if (res.data.code === 1) {
                    // 登录成功
                    this.$message.success("登录成功");
                    this.$store.dispatch("user/login", {
                        token: res.data.data.token,
                        username: res.data.data.userName,
                        id:res.data.data.id,
                        name:res.data.data.name
                    });
                    this.username = "";
                    this.password = "";
                    this.$router.push("/home");
                } else if (res.data.code === 0) {
                    // 账号或密码错误
                    this.$message.error(res.data.msg);
                    this.username = "";
                    this.password = "";
                } else {
                    this.$message.error("登录失败，请稍后再试");
                }
            } catch (err) {
                if (err.response) {
                    if (err.response.status === 401) {
                        this.$message.error("您的登录已过期，请重新登录");
                        this.$router.push('/login')
                    } else if (err.response.status === 500) {
                        this.$message.error("服务器异常，请稍后再试");
                    } else {
                        this.$message.error("请求失败");
                    }
                } else if (err.request) {
                    
                    this.$message.error("网络错误，请检查您的网络连接");
                } else {
                    
                    this.$message.error("登录异常！请稍后再试~");
                }
            }
        },
    },

};
</script>

<style scoped>
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.back {
    background-image: url('../../assets/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.login {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    padding: 20px;
    width: 320px;
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

h2 {
    text-align: center;
}

.form-item {
    margin: 10px 0;
}

label {
    font-size: 14px;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 3px;
}

input {
    display: inline-block;
    width: 60%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    outline: none;
}

button {
    width: 80%;
    padding: 10px;
    background-color: #4374ce;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #162b98;
}
</style>
